<template>
    <div class="item">
        <img :src="data.src" alt="">
        <div class="info">
            <p class="name">{{data.goods_name}}</p>
            <p class="price">￥{{data.goods_price}}</p>
        </div>
        <div class="count">x{{data.num}}</div>

    </div>
</template>

<script>
    export default {
        name:"Goods-Settlement",
        props:['data'],
    }
</script>

<style scoped lang='less'>
    .item{
        background: #fff;
        width: 100%;
        display: flex;
        padding: 2.7vw 0;
        border-bottom: 0.3vw solid rgb(240, 240, 240);
        position: relative;

        img{
            width: 16vw;
            height: 16vw;
            margin-right: 2.7vw;
        }

        .info{
            display: flex;
            width: 100%;
            justify-content: space-between;

            .name{
                font-size: 4.3vw;
                font-weight: 600;
            }

            .price{
                padding-right: 4vw;
                font-size: 3.7vw;
                color: #333;
                font-weight: 600;
            }
        }

        .count{
            position: absolute;
            right: 4vw;
            top: 9.3vw;
            font-size: 3.7vw;
            color: #ccc;
            font-weight: 600;
        }

    }

</style>